<template>
  <Top style="z-index: 20" />
  <div class="menu">
    <hr />
    <List
      :style="windowstyle.style1"
      :data="ListData"
      :headerdata="headerdata1"
      :height="windowstyle.height"
    />
    <br />
    <div class="index" v-if="params.id === 0">
      <img src="../imgs/index.png" />
    </div>
    <div v-else>
      <div class="index">
        <img src="../imgs/login_no.png" class="falseImg" />
      </div>
    </div>
    <img
      class="v1"
      src="https://img-qn-2.51miz.com/preview/element/00/01/28/10/E-1281086-CA6F65C5.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/260"
    />
    <router-view style="z-index: 19" />
  </div>
</template>

<script setup>
import { defineComponent, reactive } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import Top from "../../components/Top.vue";
import Window from "./AnnouncementView.vue";
import List from "../../components/List.vue";
const components = defineComponent(Top, Window, List);
const router = useRouter();
const windowstyle = reactive({
  style1: "width:200px;height: 700px;background-color:rgb(56,59,92);",
  height: "20%",
});
const props = defineProps({
  id: {
    type: Number,
    default: 1,
  },
});
const params = reactive({ id: 0 });
let getPageParams = function () {
  params.id = router.currentRoute.value.query.id; // query参数跳转
  // let params = router.currentRoute.value.params // params参数跳转

  console.log("currentRoute.value:", router.currentRoute.value);
  console.log("params:", params.id);
};

const id = router.currentRoute.value.query.id;
const ListData = reactive([
  "首页",
  "系统公告",
  "提问解答",
  "课程信息",
  "作业布置",
  "用户管理",
  "我的群组",
]);
const headerdata1 = reactive({
  gn1: {
    label: " ",
  },
});
</script>

<style scoped>
.menu {
  width: 100%;
  height: 100%;
  font-size: 20px;
  z-index: 18;
}
.index {
  position: absolute;
  width: 1015px;
  height: 700px;
  background-color: white;
  top: 22px;
  left: 200px;
}
.falseImg {
  width: 1015px;
}
.v1 {
  position: fixed;
  top: 300px;
  width: 500px;
  height: 300px;
  left: 600px;
  z-index: 10;
}
</style>
